<template lang='pug'>
.main-area
  label.label-tips(v-if="readOnly && isEditing")
    h6 当前状态无法编辑
  ImportantInfo.form-import-info(
    v-if="readOnly"
    :infoList="formList"
    :formValues="formValues"
    :columns="defaultColumns")
  SmartForm.smart-form.p-3(
    v-else
    ref="smartform"
    :labelSize="5"
    :formList="formList"
    :values="formValues"
    :columns="defaultColumns"
    :buttonList="buttonList"
    :formSubmitIndex="1")
    //- readOnly?[]:buttonList
</template>

<script>
/**
 * @desc 分区管理-分区信息表单
 * @author linmn
 */
import SmartForm from '@/components/SmartForm'
import ImportantInfo from '@/components/ImportantInfo'
import {cloneDeep} from 'lodash'
// import {getDyncRelation} from '../../lib'
export default {
  name: 'AreaEdit',
  components: {
    SmartForm,
    ImportantInfo
  },
  props: {
    target: {
      type: Number,
      default: 0
    },
    full: {
      type: Array,
      default: () => ([])
    },
    readOnly: {
      type: Boolean,
      default: true // 是否只读
    },
    isEditing: {
      type: Boolean,
      default: false // 是否编辑
    },
    columns: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    const versionList = ['name', 'color', 'noRemoteLargeMeterWaterRate', 'noRemoteHouseholdMeterWaterRate', 'noRemoteWaterCalcBase']
    return {
      formList: versionList,
      values: null,
      defaultColumns: this.columns,
      // columns: initColumns, // 根据readonly改变
      isRefresh: false,
      computedBtnList: [],
      buttonList: [{
        label: '保存',
        type: 'complete',
        validate: true,
        func: ({funcProps}) => {
          const {formValues} = funcProps.form
          this.$emit('updateArea', formValues)
        }
      }, {
        label: '重置',
        func: ({funcProps}) => {
          this.$set(funcProps.form, 'formValues', this.current)
        }
      }]
    }
  },
  created () {
    // const {columns} = getDyncRelation({target: this, columns: this.defaultColumns})
    this.initColumns(this.readOnly)
    // setTimeout(() => {
    //   this.$set(this, 'defaultColumns', columns)
    //   this.isRefresh = true
    // }, 100)
  },
  // updated () {
  //   console.log('isUpdated')
  //   this.isRefresh = true
  // },
  watch: {
    readOnly (type) {
      console.log('readOnly:', type)
      this.initColumns(type)
    }
  },
  computed: {
    current () {
      return this.full.find(item => item.id === this.target)
    },
    formValues: {
      set (val) {
        this.values = val
      },
      get () {
        let newData = cloneDeep(this.current)
        return this.values || newData
      }
    }
  },
  methods: {
    initColumns (type) {
      console.log('type:', type)
      this.formList.map(key => {
        this.defaultColumns[key].columnSize = [{ type: 'md', size: '12' },
          { type: 'sm', size: '12' }]
      })
    }
  }
}
</script>

<style lang='sass' scoped>
@import '../../../assets/custom.sass'
</style>
